import 'dart:io';

import 'package:base/widget/bubble/bubble_dialog.dart';
import 'package:base/widget/bubble/bubble_painter.dart';
import 'package:flutter/material.dart';

/// 提示弹框
class BubbleDemoPage extends StatelessWidget {
  final double bubbleWidth = 120;
  final double bubbleHeight = 60;
  final GlobalKey contentKey = GlobalKey();

  final GlobalKey button1Key = GlobalKey();
  final GlobalKey button2Key = GlobalKey();
  final GlobalKey button3Key = GlobalKey();
  final GlobalKey button4Key = GlobalKey();

  double getX(GlobalKey key) {
    // 二维笛卡尔坐标系中的渲染对象。
    RenderBox renderBox = key.currentContext.findRenderObject();
    double dx = renderBox.localToGlobal(Offset.zero).dx;
    return dx;
  }

  double getY(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    double dy = renderBox.localToGlobal(Offset.zero).dy;
    return dy;
  }

  double getWidth(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    return renderBox.size.width;
  }

  double getHeight(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    return renderBox.size.height;
  }

  bool isClient() {
    try {
      return Platform.isAndroid || Platform.isIOS;
    } catch (e) {
      return false;
    }
  }

  double getY1() {
    if (isClient()) {
      return getY(button1Key) +
          getHeight(button1Key) -
          MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    } else {
      return getY(button1Key) + getHeight(button1Key);
    }
  }

  double getY2() {
    if (isClient()) {
      return getY(button2Key) +
          getHeight(button2Key) / 2 -
          MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    } else {
      return getY(button2Key) + getHeight(button2Key) / 2;
    }
  }

  double getY3() {
    if (isClient()) {
      return getY(button3Key) +
          getHeight(button3Key) / 2 -
          MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    } else {
      return getY(button3Key) + getHeight(button3Key) / 2;
    }
  }

  double getY4() {
    if (isClient()) {
      return getY(button4Key) -
          bubbleHeight -
          MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top;
    } else {
      return getY(button4Key) - bubbleHeight;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bubbleDemo'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        margin: EdgeInsets.all(16),
        child: Stack(
          key: contentKey,
          children: <Widget>[
            MaterialButton(
              key: button1Key,
              color: Colors.blue,
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return BubbleDialog(
                      'Test1',
                      height: bubbleHeight,
                      width: bubbleWidth,
                      arrowLocation: ArrowLocation.TOP,
                      x: getX(button1Key) + getWidth(button1Key) / 2,
                      y: getY1(),
                    );
                  },
                );
              },
            ),
            Positioned(
                child: new MaterialButton(
                  key: button2Key,
                  onPressed: () {
                    showDialog(
                        context: context,
                        builder: (context) {
                          return BubbleDialog(
                            "Test2",
                            height: bubbleHeight,
                            width: bubbleWidth,
                            arrowLocation: ArrowLocation.RIGHT,
                            x: getX(button2Key) - bubbleWidth,
                            y: getY2(),
                          );
                        });
                  },
                  color: Colors.greenAccent,
                ),
                left: MediaQuery.of(context).size.width / 2),
            Positioned(
              child: new MaterialButton(
                key: button3Key,
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (context) {
                        return BubbleDialog(
                          "Test4",
                          height: bubbleHeight,
                          width: bubbleWidth,
                          arrowLocation: ArrowLocation.LEFT,
                          x: getX(button3Key) + getWidth(button3Key),
                          y: getY3(),
                        );
                      });
                },
                color: Colors.yellow,
              ),
              left: MediaQuery.of(context).size.width / 5,
              top: MediaQuery.of(context).size.height / 4 * 3,
            ),
            Positioned(
              child: new MaterialButton(
                key: button4Key,
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (context) {
                        return BubbleDialog(
                          "Test4",
                          height: bubbleHeight,
                          width: bubbleWidth,
                          arrowLocation: ArrowLocation.BOTTOM,
                          x: getX(button4Key) + getWidth(button4Key) / 2,
                          y: getY4(),
                        );
                      });
                },
                color: Colors.redAccent,
              ),
              left: MediaQuery.of(context).size.width / 2 -
                  Theme.of(context).buttonTheme.minWidth / 2,
              top: MediaQuery.of(context).size.height / 2 -
                  MediaQuery.of(context).padding.top -
                  kToolbarHeight,
            ),
          ],
        ),
      ),
    );
  }
}
